<template>
  <div class="divBox" style="padding-bottom:0;">
    <el-row :gutter="20" class="baseInfo">
      <router-link to="/Photo?filtrate=10">
        <el-col v-bind="grid" class="ivu-mb">
          <el-card :bordered="false" dis-hover :padding="12">
            <div  class="acea-row row-between-wrapper">
              <div class="acea-row align-center">
                <!-- <div class="main_badge">
                  <span class="iconfont iconxinzengyonghu"></span>
                </div> -->
                <span class="main_tit">待办数量</span>
              </div>
              <!--            <el-tag type="primary">今日</el-tag>-->
            </div>
            <div class="content" v-if="viewData">
              <span class="content-number spBlock my15">{{ viewData.noGreenLight }}</span>
              <!--            <el-divider></el-divider>-->
              <!--            <div class="acea-row row-between-wrapper">-->
              <!--              <span class="content-time">昨日数据</span>-->
              <!--              <span class="content-time">{{ viewData.yesterdayAddUserCount }}2 人</span>-->
              <!--            </div>-->
            </div>
          </el-card>
        </el-col>
      </router-link>
      <div @click="skip">
        <el-col v-bind="grid" class="ivu-mb">
          <el-card :bordered="false" dis-hover :padding="12" >
            <div  class="acea-row row-between-wrapper">
              <div class="acea-row align-center">
                <!-- <div class="main_badge">
                  <span class="iconfont iconxiaoshoue"></span>
                </div> -->
                <span class="main_tit" >投诉数量</span>
              </div>
              <!--            <el-tag type="primary">今日</el-tag>-->
            </div>
            <div class="content" v-if="viewData">
              <span class="content-number spBlock my15">{{ viewData. allCount}}</span>
              <!--            <el-divider></el-divider>-->
              <!--            <div class="acea-row row-between-wrapper">-->
              <!--              <span class="content-time">昨日数据</span>-->
              <!--              <span class="content-time">{{viewData.yesterdayFormCount}}12 个</span>-->
              <!--            </div>-->
            </div>
          </el-card>
        </el-col>
      </div>
      <div @click="skip">
        <el-col v-bind="grid" class="ivu-mb">
          <el-card :bordered="false" dis-hover :padding="12">
            <div  class="acea-row row-between-wrapper">
              <div class="acea-row align-center">
                <!-- <div class="main_badge">
                  <span class="iconfont iconxiaoshoue"></span>
                </div> -->
                <span class="main_tit">办结数量</span>
              </div>
              <!--            <el-tag type="primary">今日</el-tag>-->
            </div>
            <div class="content" v-if="viewData">
              <span class="content-number spBlock my15">{{ viewData.statusCount }}</span>
              <!--            <el-divider></el-divider>-->
              <!--            <div class="acea-row row-between-wrapper">-->
              <!--              <span class="content-time">昨日数据</span>-->
              <!--              <span class="content-time">{{viewData.yesterdayRegisterCount}}1 个</span>-->
              <!--            </div>-->
            </div>
          </el-card>
        </el-col>
      </div >

      <div v-if="viewData.roles==1">
        <el-col v-bind="grid" class="ivu-mb">
          <el-card :bordered="false" dis-hover :padding="12">
            <div  class="acea-row row-between-wrapper">
              <div class="acea-row align-center">
                <!-- <div class="main_badge">
                  <span class="iconfont iconyonghu"></span>
                </div> -->
                <span class="main_tit">用户访问量</span>
              </div>
              <!--            <el-tag type="primary">今日</el-tag>-->
            </div>
            <div class="content" v-if="viewData">
              <span class="content-number spBlock my15">{{ viewData.userCount }}</span>
              <!--            <el-divider></el-divider>-->
              <!--            <div class="acea-row row-between-wrapper">-->
              <!--              <span class="content-time">昨日数据</span>-->
              <!--              <span class="content-time">{{ viewData.yesterdayUserVisitCount }}2</span>-->
              <!--            </div>-->
            </div>
          </el-card>
        </el-col>
      </div>
      <div @click="skip2"  v-if="viewData.roles==1">

        <el-col v-bind="grid" class="ivu-mb">
          <el-card :bordered="false" dis-hover :padding="12">
            <div  class="acea-row row-between-wrapper">
              <div class="acea-row align-center">
                <!-- <div class="main_badge">
                  <span class="iconfont iconxinzengyonghu"></span>
                </div> -->
                <span class="main_tit">用户总数</span>
              </div>
              <!--            <el-tag type="primary">今日</el-tag>-->
            </div>
            <div class="content" v-if="viewData">
              <span class="content-number spBlock my15">{{ viewData.userAllCount }}</span>
              <!--            <el-divider></el-divider>-->
              <!--            <div class="acea-row row-between-wrapper">-->
              <!--              <span class="content-time">昨日数据</span>-->
              <!--              <span class="content-time">{{ viewData.yesterdayAddUserCount }}2 人</span>-->
              <!--            </div>-->
            </div>
          </el-card>
        </el-col>
      </div>

    </el-row>
  </div>
</template>
<script>
import { getUserCensusApi, selectNoGreenLightListApi, viewModelApi } from '@/api/dashboard'
export default {
  data() {
    return {
      grid: { xl: 6, lg: 6, md: 12, sm: 12, xs: 24},
      viewData:{},
      viewData1:{},
      filtrate:10,
    }
  },
  methods: {

    skip(){
      this.$router.push({name: 'Photo',})
    },
    skip2(){
      this.$router.push({name: 'User',})
    },
    skip3(){
      this.$router.push({name: 'Photo',params:{filtrate:this.filtrate}})
      // selectNoGreenLightListApi({page:0,limit:10}).then(async res => {
      //   //后期接口调用
      //   console.log(res)
      // })
    },

    statisticsOrder() {
      viewModelApi().then(async res => {
        //后期接口调用
        this.viewData = res;
      })
    },
    getUserCensus() {
      getUserCensusApi().then(async res => {
        //后期接口调用
        this.viewData1 = res;
      })
    },
  },
  mounted() {
    this.statisticsOrder();
    // this.getUserCensus()
  }
}
</script>
<style scoped lang="scss">
::v-deep{
  .el-col-xl-6{
    width: 20%;
  }
}
.ivu-mb{
  margin-bottom: 20px;
}
.up, .el-icon-caret-top {
  color: #F5222D;
  font-size: 12px;
  opacity: 1 !important;
}

.down, .el-icon-caret-bottom {
  color: #39C15B;
  font-size: 12px;
  /*opacity: 100% !important;*/
}
.main_tit{
  color: #333;
  font-size: 14px;
  font-weight: 500;
}
.content-time{
  font-size: 14px;
  color:#333;
  font-weight: 500;
}
.main_badge{
  width: 30px;
  height: 30px;
  border-radius: 5px;
  margin-right: 10px;
  background: #2C90FF;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.my15{
  margin: 15px 0 15px;
}
.align-center{
  align-items: center;
}
.baseInfo {
  ::v-deep .el-card__header {
    padding: 15px 20px !important;
  }
}

.content {
  &-number {
    font-size: 30px;
    font-weight: 600;
    font-family: PingFangSC-Semibold, PingFang SC;
    color: #333;
  }
  &-time{
    font-size:14px;
    color: #333333;
    font-weight: 400;
  }
}
</style>
